<template>
  <div class="content select">
  	<form id='form_txtw'>
    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th class="td_name1">生肖</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>
        <td class="td_number">号码</td>

        <th class="td_name1">生肖</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>
        <td class="td_number">号码</td>

      </tr>
      <tr>
        <th class="td_name">鼠</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="mouse" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bg1">10</span>
          <span class="round bgGreen">22</span>
          <span class="round bgRed">34</span>
          <span class="round bgRed">46</span>
        </td>

        <th class="td_name">牛</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="cattle" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bg1">9</span>
          <span class="round bgGreen">21</span>
          <span class="round bgGreen">33</span>
          <span class="round bgRed">45</span>
        </td>

      </tr>
      <tr>
        <th class="td_name">虎</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="tiger" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgRed">8</span>
          <span class="round bg1">20</span>
          <span class="round bgGreen">32</span>
          <span class="round bgGreen">44</span>
        </td>

        <th class="td_name">兔</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="rabbit" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgRed">7</span>
          <span class="round bgRed">19</span>
          <span class="round bg1">31</span>
          <span class="round bgGreen">43</span>
        </td>

      </tr>
      <tr>
        <th class="td_name">龙</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="dragon" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgGreen">6</span>
          <span class="round bgRed">18</span>
          <span class="round bgRed">30</span>
          <span class="round bg1">42</span>
        </td>

        <th class="td_name">蛇</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="snake" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgGreen">5</span>
          <span class="round bgGreen">17</span>
          <span class="round bgRed">29</span>
          <span class="round bg1">41</span>
        </td>

      </tr>
      <tr>
        <th class="td_name">马</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="horse" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bg1">4</span>
          <span class="round bgGreen">16</span>
          <span class="round bgGreen">28</span>
          <span class="round bgRed">40</span>
        </td>

        <th class="td_name">羊</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="sheep" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bg1">3</span>
          <span class="round bg1">15</span>
          <span class="round bgGreen">27</span>
          <span class="round bgGreen">39</span>
        </td>

      </tr>
      <tr>
        <th class="td_name">猴</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="monkey" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgRed">2</span>
          <span class="round bg1">14</span>
          <span class="round bg1">26</span>
          <span class="round bgGreen">38</span>
        </td>

        <th class="td_name">鸡</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="chicken" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgRed">1</span>
          <span class="round bgRed">13</span>
          <span class="round bg1">25</span>
          <span class="round bg1">37</span>
          <span class="round bgGreen">49</span>
        </td>

      </tr>
      <tr>
        <th class="td_name">狗</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="dog" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgRed">12</span>
          <span class="round bgRed">24</span>
          <span class="round bg1">36</span>
          <span class="round bg1">48</span>
        </td>

        <th class="td_name">猪</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="pig" @blur='addCount' /></td>
        <td class="td_number">
          <span class="round bgGreen">11</span>
          <span class="round bgRed">23</span>
          <span class="round bgRed">35</span>
          <span class="round bg1">47</span>
        </td>
      </tr>
    </table>

    <!--<table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th class="td_name1">特别号头数</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">特别号尾数</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">特别号头数</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

      </tr>
      <tr>
        <th class="td_name">0尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiZero" @blur='addCount' /></td>

        <th class="td_name">2尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiTwo" @blur='addCount' /></td>
        <th class="td_name">4尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiFour" @blur='addCount' /></td>

      </tr>
      <tr>
        <th class="td_name">1尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiOne" @blur='addCount' /></td>

        <th class="td_name">3尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiThree" @blur='addCount' /></td>
        <th class="td_name">5尾</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="weiFifth" @blur='addCount' /></td>
      </tr>
    </table>-->
    </form>
    <div class="bottom">
      总金额共{{ count }}元
      <el-button type="warning" @click='addTouzhu'>添加投注</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
    	<div class="dialogCgj">
    		<h3 class="red">你确定要加入{{ caipiaoTerm }}期吗？</h3>
    		<ul>
    			<li v-for="(item, index) in params">
    				<div class="flex"><span style="white-space: nowrap;">
        					号码：</span><span class="red single_ellipsis">{{item.number}} 号</span> 赔率：
    					</span><span class="red single_ellipsis">{{item.peilv}}</span> 金额：
    					</span><span class="red single_ellipsis">{{item.amount}} 元</span>
    				</div>
    			</li>
    		</ul>
    		总金额：<span class="red">{{ count }} 元</span>
    	</div>
    	<span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消投注</el-button>
            <el-button type="primary" @click="addSendData">确定投注</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
	import $ from 'jquery'
	import addCount from '../../../../../../assets/js/hallCount.js'
	import lhcTouZhu from '../../../../../../assets/js/lhcTouZhu.js'
	
  export default {
  	props: ['caipiaoTerm', 'childArr'],
    data () {
      return {
      	centerDialogVisible: false,
      	count: 0,
      	form: [],
      	eleForm: '#form_txtw',
      	params: [],
      	gameType: 15,
      	ticketId: 20
      }
    },
    created () {
    	this.gameType = this.childArr.gameType
    	this.ticketId = this.childArr.ticketId
    },
    methods: {
    	addTouzhu () {
    		this.params = []
      	let str = $('#form_txtw').serialize()
      	this.form = str.split('&')
      	this.params = lhcTouZhu(this.form, this.gameType, this.caipiaoTerm, this.ticketId)
      	console.log(this.params)
      	this.centerDialogVisible = true
      },
      addCount () {
        this.count = addCount(this.eleForm)
      },
      addSendData () {
      	this.centerDialogVisible = false
      	this.params.forEach((item, index) => {
      		let params2 = {}
      		params2.lhcCalls = []
      		params2.lhcCalls.push(item)
      		this.$api.lhc_call_call(item).then((res) => {
	      		console.log(res)
	      		if(res.code == "000000") {
	      			this.$message.success('投注成功')
	      		}
	      	})
      	})
      }
    }

  }
</script>

<style lang="less" scoped>
  @import "../../../style/game";
</style>
